<template>
  <div class="main-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="card" shadow="never">
          <div slot="header">
            <span class="tips">查询条件</span>
            <div class="right">
              <el-button icon="el-icon-search" type="primary" @click="queryData">
                查询
              </el-button>
              <el-button icon="el-icon-refresh-left" @click="resetClick">
                重置
              </el-button>
            </div>
          </div>
          <el-form label-width="100px" :model="queryForm" @submit.native.prevent>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-form-item label="警令名称">
                  <el-input v-model.trim="queryForm.name" placeholder="关键字" clearable @keyup.enter.native="queryData" />
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-form-item label="警令内容">
                  <el-input v-model.trim="queryForm.content" placeholder="关键字" clearable @keyup.enter.native="queryData" />
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-form-item label="警令类型">
                  <el-select  v-model="queryForm.type"  style="width: 100%"  clearable  @clear="queryForm.type = ''"  >
                    <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-form-item label="发布状态">
                  <el-select v-model="queryForm.status" style="width: 100%" clearable @clear="queryForm.status = ''" >
<!--                    <el-option label="请选择" value=""></el-option>-->
                    <el-option label="待发布" value="0"></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="已完成" value="2"></el-option>
                    <el-option label="已撤销" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-form-item label="发布时间">
                  <el-date-picker v-model="queryForm.publish_time" type="date" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-form-item label="协同状态">
                  <el-select v-model="queryForm.coordination_status" style="width: 100%" clearable @clear="queryForm.coordination_status = ''" >
<!--                    <el-option label="请选择" value=""></el-option>-->
                    <el-option label="反馈中" value="0"></el-option>
                    <el-option label="待督察" value="1"></el-option>
                    <el-option label="督察通过" value="2"></el-option>
                    <el-option label="督察驳回" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="card" shadow="never">
          <div slot="header">
            <span class="tips">警令协同反馈列表</span>
            <!-- <el-button type="success" class="right" icon="el-icon-download" @click="handlecancel">导出</el-button> -->
          </div>
          <el-table v-loading="listLoading" ref="listTable" stripe :data="list"
            :element-loading-text="elementLoadingText" border height="calc(100vh - 520px)">
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <el-table-column show-overflow-tooltip label="序号" align="center" width="50px;">
              <template slot-scope="scope">
                {{(queryForm.pageNo - 1) * queryForm.pageSize + scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="警令名称" align="center" width="120px">
              <template #default="{ row }">
                <el-link type="primary" @click="handlechuli(row)">{{ row.name }}</el-link>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="content" label="警令内容" width="460px"></el-table-column>
            <el-table-column show-overflow-tooltip prop="typename" label="警令类型" width="120px"
              align="center"></el-table-column>
            <el-table-column show-overflow-tooltip prop="status" label="发布状态" align="center" width="120px">
              <template #default="{ row }">
                <el-tag type="success" v-if="row.status == 0">待发布</el-tag>
                <el-tag type="warning" v-if="row.status == 1">已发布</el-tag>
                <el-tag v-if="row.status == 2">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="发布时间" align="center" prop="publish_time" width="180px">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="协同部门" align="center" prop="deptname" width="160px">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="指派人员" align="center" prop="assigner_name" width="100px">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="反馈要求" width="460px" align="left" prop="feedback_require">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="协同状态" align="center" prop="coordination_status" width="120px">
              <template #default="{ row }">
                <el-tag type="warning" v-if="row.coordination_status == 0 && null == row.is_reject">反馈中</el-tag>
                <el-tag type="success" v-if="row.coordination_status == 1">待督察</el-tag>
                <el-tag v-if="row.coordination_status == 2">督察通过</el-tag>
                <el-tag type="danger" v-if="row.coordination_status == 0 && row.is_reject == 0">督察驳回</el-tag>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="协同时限" width="180px" align="center" prop="expirationTime">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="得分" align="center"  width="120px">
              <template #default="{ row }">
                <span v-show="row.coordination_status == 2">{{row.point}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="日志" align="center" width="120">
              <template #default="{ row }">
                <el-popover trigger="click" placement="left" width="450">
                  <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                      <el-card class="cardpop" shadow="never">
                        <div slot="header">
                          <span class="tips">日志记录</span>
                        </div><el-timeline :reverse="reverse">
                          <el-timeline-item v-for="(activity, index) in activities" :key="index"
                            :timestamp="activity.operate_time">
                            {{ activity.content }}
                          </el-timeline-item>
                        </el-timeline>
                      </el-card>
                    </el-col>
                  </el-row>
                  <el-button slot="reference" type="text" icon="el-icon-document" @click="handleRz(row)"></el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300" align="center" fixed="right">
              <template #default="{ row }">
                <div style="text-align: right">
                  <el-button plain @click="handleToOne(row)" type="primary" size="mini"
                             v-if="row.coordination_status == 0 && row.order_person == 0">
                    指派
                  </el-button>
                  <el-button plain @click="handleAdd(row)" type="primary" size="mini"
                    v-if="row.coordination_status == 0">
                    反馈
                  </el-button>
                  <el-button plain @click="submitFbClick(row.id, '1')" size="mini" v-if="row.coordination_status == 0">
                    提交反馈
                  </el-button>
                  <el-button plain @click="submitFbClick(row.id, '0')" size="mini" v-if="row.coordination_status == 1">
                    撤回反馈
                  </el-button>
                  <el-button plain @click="handlecancel(row)" size="mini"
                    v-if="row.coordination_status == 1 || row.coordination_status == 2">
                    详情
                  </el-button>
                  <el-button plain @click="handlecancel(row)" size="mini"
                             v-if="row.coordination_status == 0 && row.is_reject == 0">
                    详情
                  </el-button>
                  <el-button plain @click="handleBack(row)" type="primary" size="mini"  v-if="row.coordination_status == 2">
                    追加反馈
                  </el-button>

                </div>

              </template>
            </el-table-column>
          </el-table>
          <el-pagination background :current-page="queryForm.pageNo" :page-size="queryForm.pageSize" :layout="layout"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange2"></el-pagination>
        </el-card>
      </el-col>
    </el-row>
    <edit ref="edit" @fetch-data="fetchData"></edit>
    <rizhi ref="rizhi" @fetch-data="fetchData"></rizhi>
    <views ref="views" @fetch-data="fetchData"></views>
    <someone ref="someone" @fetch-data="fetchData"></someone>
    <feedback ref="feedback" @fetch-data="fetchData"></feedback>
  </div>
</template>

<script>
import Rizhi from '@/components/dcrizhi'
import Edit from './components/edit'
import Views from './components/view'
import Someone from './components/someone'
import Feedback from './components/feedback'
import { pageList, submitSave, selectWarningTypeList,readOne } from '@/api/warningOrderDept'
import { getOneLog } from '@/api/warningOrder'
export default {
  name: 'xtfkIndex',
  components: { Edit, Rizhi, Views,Someone,Feedback},
  data() {
    return {
      reverse: true,
      activities: [],
      value1: '',
      checked: false,
      isShow: false,
      list: null,
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        dept_id: '',
        name: '',
        type: '',
        status: '',
        publish_time: '',
        coordination_status: '',
        dept_discriminate: 0,
        content: '',
      },
      xtList: [],
      faList: [],
      types: []
    }
  },
  created() {
    var nameTemp = this.$route.query.name;
    if (nameTemp != '' && nameTemp != undefined && nameTemp != null){
      this.queryForm.name = nameTemp;
    }

    this.fetchData()
    this.selectWarningTypeData();
  },

  watch: {
    $route(to, from) {
      window.location.reload(); //监测到路由发生跳转时刷新一次页面
    },
  },
  beforeDestroy() { },
  mounted() { },
  methods: {
    commandmoreValue(command, row) {
      return {
        row: row,
        command: command,
      }
    },
    handleCommandmore(val) {
      var command = val.command
      switch (command) {
        case 'a': //提交反馈
          this.$confirm('是否提交反馈？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$message({
                type: 'success',
                message: '提交反馈成功',
              })
              // this.responseEvent(val.row.id)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
              })
            })
          break
        case 'b': //撤回反馈
          this.$confirm('是否撤回反馈？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$message({
                type: 'success',
                message: '撤回反馈成功',
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
              })
            })
          break
        default:
          //这里是没有找到对应的值处理
          break
      }
    },
    handleCurrentChange(val) {
      this.selectRows = val
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange2(val) {
      this.queryForm.pageNo = val
      this.fetchData()
    },
    handlechuli(row) {
      this.readOneDept(row.id);
      this.$refs['views'].showDia(row.id)
    },
    handlecancel(row) {

      if (row.id) {
        this.$refs['views'].showDia(row.id)
      }
      else {
        this.$refs['views'].showDia()
      }

    },
    handleBack(row){
      this.$refs['feedback'].showDia(row.id)
    },
    handleAdd(row) {
      this.readOneDept(row.id);
      if (row.id) {
        this.$refs['edit'].showDia(row)
      }
      else {
        this.$refs['edit'].showDia()
      }
    },
    handleToOne(row){
      this.readOneDept(row.id);
      this.$refs['someone'].showDia(row)
    },
    handleRz(row) {
      getOneLog(row).then((res) => {
        this.activities = res.data;
      })
      // if (row.id) {
      //   this.$refs['rizhi'].showDia(row)
      // }
      // else {
      //   this.$refs['rizhi'].showDia()
      // }
    },
    queryData() {
      this.queryForm.pageNo = 1
      this.fetchData()
    },
    moreQuery() {
      this.isShow = !this.isShow
    },
    resetClick() {//重置
      this.queryForm = this.$options.data().queryForm;
      this.fetchData();
    },
    async fetchData() {//初始化数据
      this.listLoading = true
      const { data } = await pageList(this.queryForm)
      this.list = data.list;
      this.total = data.total;
      setTimeout(() => {
        this.listLoading = false
      }, 300)
    },
    async selectWarningTypeData() {//获取警令状态下拉
      const { data } = await selectWarningTypeList();
      console.log(data)
      this.types = data;
    },
    //提交反馈方法
    submitFbClick(id, status) {
      var title = "";
      if (status == 1) {
        title = "提交反馈";
      } else {
        title = "撤回反馈";
      }
      this.$confirm('确定要' + title + '吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        this.submitSaveData(id, status, title);
      }).catch(() => { })
    },
    async submitSaveData(id, status, title) {//提交反馈接口
      const { data } = await submitSave({ id: id, coordination_status: status })
      if (data == 1) {
        this.$message({
          type: 'success',
          message: title + '成功',
        })
        this.fetchData();//初始化刷新数据
      } else {
        if (status == 1) {
          this.$message({
            type: 'error',
            message: '请先填写反馈',
          })
        } else {
          this.$message({
            type: 'error',
            message: title + '失败',
          })
        }

      }
    },
    async readOneDept(val){
      var x = {}
      x.id = val
      const { data } = await readOne(x);
    }
  },
}
</script>
<style lang="scss" scoped>
.cardpop {
  height: 400px;

  ::v-deep {
    .el-card__body {
      height: calc(100% - 90px);
      overflow-y: auto;
    }
  }
}
</style>